<template>
	<view class="mine">
		<template v-if="isLogin">
			<view class="mine-login" @click="goLogin">
				请先登录
			</view>
		</template>
		<template v-else>
		<image class="bg" mode="aspectFill" src="../../static/images/defaultBgImg.png" ></image>
		<view class="top">
			<view class="user">
				<image class="user-img" @click="modifyFace" :src="userInfo.face"></image>
				<view class="user-info">
					<text>用户：{{userInfo.nickname}}</text>
					<text>抖音号：{{userInfo.num}}</text>
				</view>
			</view>
			<view class="des">
				{{userInfo.description}}
			</view>
			<view class="other">
				<view class="left">
					<view>
						<text>{{userInfo.myFollowsCounts}}</text>
						<text>关注</text>
					</view>
					<view>
						<text>{{userInfo.myFansCounts}}</text>
						<text>粉丝</text>
					</view>
					<view>
						<text>{{userInfo.totalLikeMeCounts}}</text>
						<text>获赞</text>
					</view>
				</view>
				<view class="right" @click="goMySet">
					<image class="icon-set" src="../../static/images/icon-settings.png"></image>
					<text>设置</text>
				</view>
			</view>
		</view>
		<view class="tab">
			<view class="item" :class="{active:isCurrent==0}" @click="switchTab(0)">
				作品
			</view>
			<view class="item" :class="{active:isCurrent==1}" @click="switchTab(1)">
				私密
			</view>
			<view class="item" :class="{active:isCurrent==2}" @click="switchTab(2)">
				赞过
			</view>
		</view>
		<view class="img-list">
			<template v-for="item in imgList" :key="item.id">
			<image class="img-poster" :src="item.imgSrc" @click="goVlog"></image>
			</template>
			<view class="empty"></view>
		</view>
		<view class="tips">已经到底了</view>
		<view class="tips" v-if="imgList.length==0">
			没有内容
		</view>
	</template>
	</view>
</template>

<script setup>
	let serverUrl=getApp().globalData.severUrl
import { ref } from 'vue';
import {onTabItemTap,onShow} from "@dcloudio/uni-app"
let isLogin =ref(true)
let userInfo=ref({})
onShow(()=>{
	if(uni.getStorageSync("userToken")!=""){
		isLogin.value=false
	}
	getUserInfo()
})
function getUserInfo(){
	let userId=uni.getStorageSync("userId")
	uni.request({
		url:serverUrl+"userInfo/query",
		data:{
			"userId":userId
		},
		success(res) {
			if(res.data.status==200){
				uni.setStorageSync("userInfo",res.data.data)
				userInfo.value=res.data.data
			}else{
				uni.showToast({
					title:res.data.msg
				})
			}
		}
	})
}
const isCurrent =ref(0)
const switchTab=(i)=>{
	isCurrent.value=i
}
const imgList=ref([
	{
		id:'1',
		imgSrc:"../../static/images/test/pic1.jpg"
	},
	{
		id:'2',
		imgSrc:"../../static/images/test/pic1.jpg"
	},
	{
		id:'3',
		imgSrc:"../../static/images/test/pic1.jpg"
	},
	{
		id:'4',
		imgSrc:"../../static/images/test/pic1.jpg"
	},
	{
		id:'5',
		imgSrc:"../../static/images/test/pic1.jpg"
	}
])
//修改头像
const modifyFace=()=>{
	uni.navigateTo({
		url:'./modifyFace'
	})
}
//我的设置
const goMySet=()=>{
	uni.navigateTo({
		url:"./mySet"
	})
}
//判断是否登录跳转登录页
onTabItemTap(()=>{
	if(uni.getStorageSync("userToken")==""){
		uni.navigateTo({
			url:"../login/login"
		})
	}
	
})
//跳转到登录页面
const goLogin=()=>{
	uni.navigateTo({
		url:"../login/login"
	})
}
//跳转视频详情
const goVlog=()=>{
	uni.navigateTo({
		url:"../vlog/vlog"
	})
}
</script>

<style scoped lang="scss">
	.mine{
		position: relative;
		background-color: #171825;
		.mine-login{
			background-color: #333;
			text-align: center;
			margin-top: 200rpx;
			padding: 20rpx 0;
			width: 300rpx;
			border-radius: 20rpx;
			margin-left: calc(50% - 100rpx);
		}
		.bg{
			width: 100%;
			display: block;
		}
		.top{
			position: absolute;
			top:100rpx;
			left: 30rpx;
		}
		.user{
			display: flex;
			align-items: center;
			text{
				display: block;
				color: #fff;
			}
		}
		
		.user-img{
			width: 160rpx;
			height: 160rpx;
			border-radius: 80rpx;
			margin-right: 20rpx;
			border: 1px solid #fff;
		}
		.des{
			color: #fff;
			line-height: 80rpx;
			margin-bottom: 30rpx;
		}
		.other{
			display: flex;
			.left{
				display: flex;
				margin-right: 80rpx;
				text{
					display: block;
					color: #fff;
					text-align: center;
					padding: 0 20rpx;
				}
			}
			.right{
				border: 1px solid #ccc;
				padding: 0 60rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				height: 60rpx;
				text{
					color: #fff;
				}
			}
			.icon-set{
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}
		.tab{
			display: flex;
			background-color: #171825;
			color: #69696B;
			.item{
				flex:1;
				text-align: center;
				padding: 20rpx 0;
				border-bottom: 2px solid  #171825;
			}
			.active{
				border-color: #EF274D;
				color: #fff;
			}
		}
		.img-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.img-poster{
				width: 246rpx;
				height: 300rpx;
				margin-bottom: 10rpx;
			}
			.empty{
				width: 246rpx;
			}
		}
		.tips{
			text-align: center;
		}
	}

</style>
